<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
export default {
  name: 'powerVsShift',
  data () {
    return {
      chartInstance: null,
      initOption: null
    }
  },
  created () {},
  mounted () {
    this.initChart()
  },
  props: {
    chartsData: {
      type: Array,
      required: true
    },
    whoUse: {
      type: String
    }
  },
  watch: {
    chartsData: {
      handler (newVal, oldVal) {
        if (oldVal !== newVal && oldVal !== undefined) {
          if (newVal !== []) {
            // console.log('newValVSVS', newVal, oldVal)
            this.realData = newVal
            var copys = JSON.parse(JSON.stringify(this.realData))
            this.timeWay(copys)
            const seriesGroup = []
            var that = this
            seriesGroup[0] = {
              name: '有功功率',
              type: 'bar',
              xAxisIndex: 0,
              yAxisIndex: 0,
              barWidth: 4,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  // color: function (pa) {
                  //   var col = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     { offset: 0, color: 'rgb(0,255,255)' },
                  //     { offset: 1, color: 'rgb(0,108,237)' }
                  //   ])
                  //   console.log('pa', pa)
                  //   if (pa.data[1] < 10000 && Math.abs(pa.data[1] - pa.data[2]) > 100) {
                  //     console.log('pa.data[1] - pa.data[2]', Math.abs(pa.data[1] - pa.data[2]))
                  //     return col
                  //   } else {
                  //     return col
                  //   }
                  // }
                  color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgb(0,255,255)' },
                    { offset: 1, color: 'rgb(0,108,237)' }
                  ])
                }
              },
              encode: {
                x: 0,
                y: 1
              }
            }
            seriesGroup[2] = {
              name: '功率设定',
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              // symbol: 'emptyCircle',
              symbol: 'circle',
              symbolSize: 2,
              itemStyle: {
                normal: {
                  color: 'rgba(253,134,1,1)'
                  // color: 'rgb(145,115,213)'
                }
              },
              lineStyle: {
                width: 1.5
              },
              // type: 'bar',
              // barGap: '-100%',
              // barWidth: 4,
              // itemStyle: {
              //   normal: {
              //     barBorderRadius: 5,
              //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //       { offset: 0, color: 'rgba(0,207,255,0.5)' },
              //       { offset: 0.2, color: 'rgba(0,207,255,0.3)' },
              //       { offset: 1, color: 'rgba(0,207,255,0)' }
              //     ])
              //   }
              // },
              // z: -12,
              encode: {
                x: 0,
                y: 3
              }
            }
            seriesGroup[1] = {
              name: '位移',
              type: 'line',
              smooth: true,
              showAllSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              xAxisIndex: 0,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: 'rgb(6,253,188)'
                }
              },
              encode: {
                x: 0,
                y: 2
              }
            }
            this.updateChart(seriesGroup, copys)
          }
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart () {
      this.initOption = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.1)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#7B7DDC'
            }
          }
        },
        legend: {
          data: ['有功功率', '功率设定', '位移'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0%'
        },
        grid: {
          x: '7%',
          width: '86%',
          y: '12%',
          bottom: '10%',
          right: '4%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgb(154, 170, 203)'
            }
          },
          nameTextStyle: {
            color: 'rgb(154, 170, 203)'
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 7,
            color: 'rgb(154, 170, 203)',
            formatter: function (value) {
              let ret = '' // 拼接加\n返回的类目项
              var maxLength = 6 // 每行最多个数
              var valLength = value.length // x轴一个项的总数
              var rowN = Math.ceil(valLength / maxLength)
              if (rowN > 1) { // 如果大于5个字符
                for (let i = 0; i < rowN; i++) {
                  let temp = ''
                  temp = value.substring(i * maxLength, i * maxLength + maxLength) + '\n'
                  ret += temp
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              fontSize: 8
            }
          }
          // data: category
        },
        yAxis: [
          {
            name: '功率(kW)',
            type: 'value',
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                // color: 'rgb(154, 170, 203)'
              }
            },
            nameTextStyle: {
              color: 'rgb(154, 170, 203)'
            },
            axisTick: { // 不显示轴刻度
              show: false
            },
            axisLabel: {
              color: 'rgb(154, 170, 203)',
              formatter: '{value}'
            }
          },
          {
            name: '位移(mm)',
            type: 'value',
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                // color: 'rgb(154, 170, 203)'
              }
            },
            nameTextStyle: {
              color: 'rgb(154, 170, 203)'
            },
            axisTick: { // 不显示轴刻度
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              color: 'rgb(154, 170, 203)'
            }
          }
        ],
        series: [],
        dataset: {
          source: []
        }
      }
      this.chartInstance = this.$echarts.init(this.$refs.echartsPoly)
      // console.log('温度曲线initOption', this.initOption)
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    updateChart (seriesGroup, realData) {
      var gridShow = {
        x: '7%',
        width: '86%',
        y: '12%',
        bottom: '10%',
        right: '4%',
        top: '15%'
      }
      var gridReport = {
        x: '12%',
        width: '77%',
        y: '12%',
        bottom: '20%',
        // right: '4%',
        top: '15%'
      }
      const dataOption = {
        series: seriesGroup,
        grid: this.whoUse === '报表' ? gridReport : gridShow,
        dataset: {
          source: realData // 数组
        }
      }
      this.chartInstance.setOption(dataOption)
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    timeWay (arrBig) {
      if (arrBig[1][0].length === 19) {
        for (var i = 1; i < arrBig.length; i++) {
          arrBig[i][0] = arrBig[i][0].substring(5, arrBig[i][0].length - 3)
        }
      }
    }
  }
}
</script>

<style scoped>
.charts_container {
  width: 100%;
  height: 100%;
}
</style>
